<template>
<div>
  <div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="输入商品">
        <el-input v-model="cropName" @blur="init"></el-input>
      </el-form-item>
    </el-form>
  </div>
  <div ref="pro_chart" :style="{width:'500px',height:'300px'}"></div>
</div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "AgreementView",
  data(){
    return{
        cropName:''
    }
  },methods:{
    init(){
      this.axios.get('/cropservice/exchat/list?outInGoods='+this.cropName).then(res=>{
        const months = res.data.data.map(item => item.month);
        const inQuantities = res.data.data.map(item => item.inQuantity);
        const outQuantities = res.data.data.map(item => item.outQuantity);
        const remainQuantities = res.data.data.map(item => item.remainQuantity);
        console.log(inQuantities)


        const myChar = echarts.init(this.$refs.pro_chart)
        const obj = {
          title: {
            text: '仓库商品统计图'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['入库数量', '出库数量', '剩余数量']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: months
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '入库数量',
              type: 'line',
              stack: 'Total',
              data: inQuantities
            },
            {
              name: '出库数量',
              type: 'line',
              stack: 'Total',
              data: outQuantities
            },
            {
              name: '剩余数量',
              type: 'line',
              stack: 'Total',
              data: remainQuantities
            }
          ]
        };

        myChar.setOption(obj);
      })
    }
  },created() {

  }
}
</script>

<style scoped>

</style>